<template>
  <div style="padding: 10px">

    <div :span="24" class="action-bar">
      <el-date-picker style="width: 500px" v-model="timeList" value-format="yyyy-MM-dd" type="daterange"
                      align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                      :picker-options="pickerOptions">
      </el-date-picker>
      <el-button type="primary" style="margin-left: 8px" @click="search">检索</el-button>
    </div>

    <el-table stripe :data="tableData.commissions_list" v-loading="tableLoadingShow" element-loading-text="加载中"
              style="width: 100%" class="el_table_style" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
      <el-table-column label="序号" prop="id"></el-table-column>
      <el-table-column label="订单号" prop="order_num"></el-table-column>
      <el-table-column label="下单用户" prop="from_nickname"></el-table-column>
      <el-table-column label="实付" prop="pay_amount"></el-table-column>
      <!--<el-table-column label="支付时间" prop="pay_time"></el-table-column>-->
      <el-table-column label="分销商等级" prop="distribution_level"></el-table-column>
      <el-table-column label="佣金" prop="amount"></el-table-column>
      <el-table-column label="佣金比率" prop="rate"></el-table-column>
      <el-table-column label="佣金层级" prop="level"></el-table-column>
      <el-table-column label="结算状态" prop="status_name"></el-table-column>
      <el-table-column label="到账时间" prop="arrival_time"></el-table-column>
    </el-table>

    <div class="page-code" style="margin-top: 20px">
      <el-pagination
        background :current-page="searchParams.page" :page-size="searchParams.limit" layout="prev, pager, next" :total="pageTotal" @current-change="pageChange">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  export default {
    props: {
      updateFlag: ''
    },
    data() {
      return {
        tableLoadingShow: false,
        searchParams: {
          page: 1,
          limit: 8,
          start_time: '',
          end_time: ''
        },
        pageTotal: 0,
        tableData: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        timeList: ['','']
      }
    },
    watch: {
      /*updateFlag() {
        this.getUserRebate()
      },*/
      timeList(val){
        if(val==null){
          this.searchParams.page = 1
          this.searchParams.start_time = ''
          this.searchParams.end_time = ''
          this.getUserRebate()
        }
      }
    },
    mounted() {
      this.getUserRebate()
    },
    methods: {

      inputClear() {

      },

      search() {
        if(this.timeList !=null){
          this.searchParams.start_time = this.timeList[0]
          this.searchParams.end_time = this.timeList[1]
        }
        this.searchParams.page = 1
        this.getUserRebate()
      },

      //获取分销列表
      async getUserRebate(){
        this.tableLoadingShow = true;
        let params = {
          limit: this.searchParams.limit,
          page: this.searchParams.page,
          start_time: this.searchParams.start_time,
          end_time: this.searchParams.end_time
        }
        const res = await this.$api.getUserRebate(params);
        if(res.data.level=='success'){
          let list = res.data.data;
          this.tableData = list;
          this.pageTotal = res.data.page_info.total
        }else {
          this.$message.error(res.data.message)
        }
        this.tableLoadingShow = false;
      },

      pageChange(e){
        this.searchParams.page = e
        this.getUserRebate()
      }

    },
  }
</script>

<style scoped lang="scss">
  .action-bar{
    background-color: #f2f2f2;
    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }
</style>

<style scoped>
  /deep/.el-table td, /deep/.el-table th {
    text-align: center;
  }
  /deep/.el-table .warning-row {
    background: #f8f9fa;
  }

  /deep/.el-table .success-row {
    background: #ffffff;
  }
  /deep/.el_table_style{
    border: 1px solid #dee2e6;
  }
  /deep/.el-table td {
    border: none;
  }

  .cardCss {
    border-radius: 12px;
    margin-left: 10px;
  }

  .dataNum {
    font-size:23px;
    padding: px;
    margin-bottom: 5px;
  }

  .bottomName {
    font-size: 0.8vw;
    color: white;
    height: 40px;
    line-height: 40px;
    background-color: red;
    /* border-top: 1px solid black; */
  }

</style>
